
<template>
  <div class="comment-info" v-show="Object.keys(commentInfo).length">
    <div class="info-header">
      <div class="header-title">用户评价</div>
      <span class="header-more">更多</span>
    </div>
    <div class="item-info" v-for="  (v,i) in commentInfo" :key="i">
      <div class="item-user">
        <img :src="v.user.avatar" />
        <span>{{v.user.uname}}</span>
      </div>
      <div class="info-detail">
        <p class="content">{{v.content}}</p>
        <div class="info-time">
          <span>{{v.created| showDate}}</span>
          <span class="style">{{v.style}}</span>
        </div>
      </div>
      <div class="info-img" v-show="v.images">
        <img :src="img" v-for=" (img ,i ) in v.images" :key="i" /> </div>
    </div>
    <Range />
  </div>
</template>

<script>
import Range from 'components/common/range/range'
import { formatDate } from 'common/utils.js'
export default {
  components: { Range },
  props: {
    commentInfo: {
      type: Array,
      default() {
        return []
      }
    }
  },
  filters: {
    showDate(val) {
      let date = new Date(val * 1000)
      return formatDate(date, 'yyyy-MM-dd')
    }
  }
}
</script>

<style scoped>
.comment-info {
  padding: 20px 10px 10px;
  border-bottom: 5px solid #eee;
  margin-bottom: 10px;
}
.info-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.item-user {
  display: flex;
  align-items: center;
}
.item-user img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin: 10px 10px 10px 0;
}
.content {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 5px;
}
.style {
  margin-left: 10px;
}
.info-time {
  font-size: 13px;
}
</style>